<template>
  <div class="success-screen">
    <div class="success-icon">
      <i class="fas fa-check-circle"></i>
    </div>
    <div class="success-message">
      {{ message }}
    </div>
    <p class="complete-details">
      {{ details }}
    </p>
    <button class="btn btn-block" @click="goHome">
      返回主屏幕
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 从路由参数获取消息内容
const message = computed(() => {
  return route.query.message as string || '操作完成！'
})

const details = computed(() => {
  return route.query.details as string || '感谢使用智能文件存储柜服务'
})

// 返回主屏幕
const goHome = () => {
  router.push('/')
}
</script>

<style scoped>
.success-screen {
  text-align: center;
  padding: 40px 20px;
}

.success-icon {
  font-size: 5rem;
  color: var(--secondary);
  margin-bottom: 20px;
}

.success-message {
  font-size: 1.8rem;
  margin-bottom: 30px;
}

.complete-details {
  margin-bottom: 30px;
  font-size: 1.2rem;
}

.btn {
  padding: 15px 25px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #2980b9;
}

.btn-block {
  width: 100%;
}
</style>
